<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData">
      <el-form-item label="充值日期">
        <el-date-picker
          v-model="formData.createDate"
          @blur="searchChange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select size="small" v-model="formData.settleStatus" @change="searchChange" clearable>
          <el-option v-for="(item, index) in settlementStatusList" :label="item.label" :value="item.value" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="tableOption"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot-scope="scope"
                slot="settleStatus">
        <el-tag v-if="scope.row.settleStatus == 0"
                size="small" type="warning">未打款</el-tag>
        <el-tag v-if="scope.row.settleStatus == 1"
                size="small" type="warning">已打款</el-tag>
        <el-tag v-if="scope.row.settleStatus == 2"
                size="small" type="danger">未收款</el-tag>
        <el-tag v-if="scope.row.settleStatus == 3"
                size="small" type="success">已收款</el-tag>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { tableOption1 } from '@/crud/settlement/index'
export default {
  data () {
    return {
      dataList: [],
      dataListLoading: false,
      tableOption: tableOption1,
      formData: {
        startTime:'',
        endTime:'',
        settleStatus: '',
        createDate: ''
      },
      settlementStatusList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '未打款',
          value: 0
        },
        {
          label: '已打款',
          value: 1
        }
      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
    }
  },

  mounted () {
    this.getDataList()
  },

  methods: {
    // 获取数据列表
    getDataList (page, params) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/recharge/settle/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(({ data }) => {
        this.dataList = data.data.records
        this.page.total = data.data.total
        this.dataListLoading = false
      })
    },

    // 条件查询
    searchChange () {
      if(this.formData.createDate&&this.formData.createDate.length > 0) {
        this.formData.startTime = this.formData.createDate[0]
        this.formData.endTime = this.formData.createDate[1]
      }
      else {
        this.formData.startTime = ''
        this.formData.endTime = ''
      }
      this.page.currentPage=1
      this.getDataList(this.page, this.formData)
    },
    sizeChange(val){
      this.page.pageSize=val
      this.getDataList(this.page, this.formData)
    },
    currentChange(val){
      this.page.currentPage=val
      this.getDataList(this.page, this.formData)
    }
  }
}
</script>

<style lang="scss">
.remain{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  input{
    width: 100px;
  }
}
</style>

